<template>
  <div id="main-search" class="main-search">
    <el-form
      ref="commonForm"
      :rules="rules"
      border
      v-bind="$attrs"
      inline
      :model="model"
      v-on="$listeners"
    >
      <template v-for="(item, index) in itemList">
        <el-form-item :key="index" :label="item.label" :prop="item.prop">
          <!-- 输入框 -->
          <el-input v-if="item.type === 'Input'" v-model="model[item.prop]" />
          <!-- 下拉框 -->
          <el-select
            v-if="item.type === 'Select'"
            v-model="model[item.prop]"
            :style="{ width: '8rem' }"
          >
            <el-option
              v-for="op in item.options"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            />
          </el-select>
          <!-- 日期 -->
          <el-date-picker
            v-if="item.type === 'data'"
            v-model="model[item.prop]"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            :style="{ width: '100%' }"
            placeholder="选择日期"
          />
          <!-- 个人信息查询项目 -->
          <MyInformation
            ref="myInformation"
            v-if="item.type === 'myInformation'"
            :model="model"
            :item-options="item.options"
          />
          <AgeDate v-if="item.type === 'ageDate'" :model="model" />
          <!-- 是否体检 -->
          <PhysicalExamination
            v-if="item.type === 'checkType'"
            :model="model"
          />
          <DoctorQuery v-if="item.type === 'doctorQuery'" :model="model" />
          <TimeQuery v-if="item.type === 'TimeQuery'" :model="model" />
          <!-- 时间查询选项 -->
          <TimeQueryTest
            v-if="item.type === 'TimeQueryTest'"
            class="myClass"
            :model="model"
          />
          <!-- 年龄段查询 -->
          <AgeQuery v-if="item.type === 'AgeQuery'" :model="model"> </AgeQuery>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import MyInformation from "./form-item/MyInformation.vue"
import PhysicalExamination from "./form-item/PhysicalExaminationShow.vue"
import DoctorQuery from "./form-item/DoctorQuery.vue"
import AgeDate from "./form-item/AgeDate.vue"
import TimeQuery from "./form-item/TimeQuery.vue"
import TimeQueryTest from "./form-item/TimeQueryTest.vue"
import AgeQuery from "./form-item/AgeQuery.vue"
export default {
  name: "CommonForm",
  components: {
    MyInformation,
    PhysicalExamination,
    TimeQuery,
    TimeQueryTest,
    AgeDate,
    DoctorQuery,
    AgeQuery
  },
  inheritAttrs: false,
  props: {
    model: {
      type: Object,
      default: () => {}
    },
    itemList: {
      type: Array,
      default: () => []
    },
    rules: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      span: 6
    }
  },
  computed: {},
  watch: {
    model: {
      handler(newValue) {
        // console.log(newValue)
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    validate(fun) {
      return this.$refs.commonForm.validate(fun)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-search {
  padding-top: 15px;
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 100%;
    display: flex;
    /deep/.el-form-item__content {
      flex: 1;
    }
  }
  .marginLeft {
    margin-left: 20px;
  }
  .myClass {
    /deep/ .el-form-item__label-wrap {
      margin-left: 0 !important;
    }
  }
}
</style>
